"use client"

import React, { useEffect } from "react";
import * as echarts from 'echarts';


interface GraphProps {
  graphType: string,
  data: number[],
  labelShow?: boolean,
  xAxis?: string[] | number[],
  yAxis?: number[],
  container: string,
  title?: string
}

function getLabel(scoreArr: number[]) {
  let maxNum = Math.max(...scoreArr);
  let maxNumIndex = scoreArr.indexOf(maxNum);
  switch (maxNumIndex) {
    case 0:
      return '消极'
      break;
    case 1:
      return '中性'
      break;
    case 2:
      return '积极'
      break;
    default:
      break;
  }
}

const PieGraph: React.FC<GraphProps> = ({
  container,
  title,
  data
}: GraphProps) => {
  useEffect(() => {
    let myChart = echarts.init(document.getElementById(container));

    myChart.setOption({
      title: {
        text: getLabel(data),
        left: 'center',
        top: 'center'
      },
      series: [
        {
          type: 'pie',
          data: [
            {
              value: data[0],
              name: '消极'
            },
            {
              value: data[1],
              name: '中性'
            },
            {
              value: data[2],
              name: '积极'
            }
          ],
          radius: ['40%', '70%']
        }
      ]
    })
    if (typeof window !== 'undefined') {
      window.addEventListener("resize", function (e) {
        myChart.resize();
      })
    } else {
      console.log('u are on the server~');

    }
  })
  return (
    <div id={container} style={{ width: '200px', height: '200px', marginLeft: '300px' }} ></div>
  )
}

export default PieGraph;